<template>
  <div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <!--<el-button type="text" size="small" @click="dialogFormVisible = true">编辑</el-button>-->
          <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>


    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-date-picker v-model="value1" type="date" placeholder="选择日期" prop="date" ></el-date-picker>
        <el-form-item label="姓名" :label-width="formLabelWidth"  prop="name">
          <el-input v-model="form.name" autocomplete="off" style="width: 48%"></el-input>
        </el-form-item>

        <el-form-item label="省份" :label-width="formLabelWidth"  prop="province">
          <el-select v-model="form.province" placeholder="请选择省份" value="">
            <el-option v-for ="(item,index) in provinceOption" :key="index"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="市区" :label-width="formLabelWidth"  prop="province">
          <el-select v-model="form.province" placeholder="请选择市区" value="">
            <el-option v-for ="(item,index) in shiOption" :key="index"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地址" :label-width="formLabelWidth"  prop="address">
          <el-select v-model="form.address" placeholder="请选择地址" value="">
            <!--<el-option label="区域一" value="shanghai"></el-option>-->
            <!--<el-option label="区域二" value="beijing"></el-option>-->
            <el-option v-for ="(item,index) in addressOption" :key="index"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'TableTest',
    props: {},
    components: {},
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '张三',
          province: '辽宁',
          city: '大连',
          address: '甘井子区',
          zip: 995533
        }],
        dialogFormVisible: false,
        form: {
          date: '',
          name: '',
          province: '',
          city: '',
          address: '',

          zip: '',

        },

        formLabelWidth: '120px',
        value1:'',
        provinceOption:[
          {id:0,label:"上海",value:"上海"},
          {id:1,label:"北京",value:"北京"},
          {id:2,label:"大连",value:"大连"},
          {id:3,label:"天津",value:"天津"},
        ],
        shiOption:[
          {id:0,label:"上海",value:"上海"},
          {id:1,label:"北京",value:"北京"},
          {id:2,label:"大连",value:"大连"},
          {id:3,label:"天津",value:"天津"},
        ],
        addressOption:[
          {id:0,label:"上海",value:"上海"},
          {id:1,label:"北京",value:"北京"},
          {id:2,label:"大连",value:"大连"},
          {id:3,label:"天津",value:"天津"},
        ],

      }
    },
    computed: {},
    watch: {
      data(newValue, oldValue) {

      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      handleEdit:function (row) {
        // alert(row.name);
        console.log(row);
        //this.form={name:row.name,address:row.address};
        this.form=Object.assign({},row);
        this.dialogFormVisible=true;
      },
      handleDel:function (row) {
        //this.$alert();
        var vm =this;
        this.$confirm("确认删除?")
          .then(_ => {
            vm.done(row.name);//
           // alert('ddd');
          })
          .catch(_ => {})
      },
      done:function (row) {
        alert(row)
      }
    },
    filters: {
      fnName: function (value) {
        return value
      }
    }
  }
</script>

<style scoped>

</style>
